<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>基金详情</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/style.css">
	<script src="../../build/public/vue.js" charset="utf-8"></script>
	<script src="../../build/public/base.js" charset="utf-8"></script>
	<script src="../../build/js/config.js" charset="utf-8"></script>
</head>
<body>
	<div id="container" style="padding-bottom:50px;">
		<div class="detail-2-list funder-datail-list-dd">
			<dl class="">
				<dt @click="collapse">基金经理<i class="iconfont">&#xe68f;</i></dt>
				<dd>
					<div class="funder-datail" v-for="item in managerInfo">
						<div class="funder-datail-top">
							<!--<img src="http://zdtest-001.oss-cn-shenzhen.aliyuncs.com/96ccc81e-1039-11e7-89e6-3497f69bb1fe.jpg" alt="">-->
							<img :src="item.picture" alt="" id="funder-head">
							<h3> {{ item.name }}  <span class="education"> {{ item.education | formatEducation}} </span></h3>
							<p>{{ item.manageDate }}</p>
						</div>
						<div class="funder-datail-list">
							<p>经理简介</p>
							<div class="funder-datail-text">
								{{ item.introduction }}
							</div>
						</div>

						<div class="funder-datail-list">
							<p>投资风格</p>
							<div class="funder-datail-text">
								 {{ item.investmentStyle }}
							</div>
						</div>
						<div class="funder-datail-list">
							<p>从业经历</p>
							<div class="funder-datail-more">
								<ul class="funder-datail-more-title clear-fix">
										<li>历任基金</li>
										<li>任职期间</li>
										<li>任职回报</li>
								</ul>
								<ul class="funder-datail-more-con clear-fix" v-for="v in item.fundManagerExperienceList">
										<li> {{ v.previousFund }}</li>
										<li> {{ v.startDate | formatTime}} 至 {{ v.endDate | formatTime}}</li>
										<li v-if="v.jobReturn == '0.0000'">--</li>
										<li v-else> {{ v.jobReturn | formatArgs("%")}}</li>
								</ul>
							</div>
						</div>
					</div>
				</dd>
			</dl>
			<dl>
				<dt @click="collapse">重点持仓<i class="iconfont">&#xe68f;</i></dt>
				<dd>
					<div class="more-2-list">
						<h5><span v-if="!assetsList.year">--</span><span v-else>{{ assetsList.year }}</span>年第<span v-if="!assetsList.quarter">--</span><span>{{ assetsList.quarter }}</span>季度</h5>
						<p>
							<span v-if="(assetsList.assets/10000).toFixed(3) == 'NaN' ">--</span>
							<span v-else>{{ (assetsList.assets/10000).toFixed(3) }} 万</span>
							<span>资产总值</span>
						</p>
						<div class="more-2-list-chart">
							<p>资产分布<a style="color: #666;font-size: 10px;">(百分比)</a></p>
							<div id="chartLine" style="width:100%;height:160px;display: inline-block"></div>
						</div>
						<div class="more-2-list-list">
							<p>重仓持股</p>
							<ul>
								<li class="clear-fix" v-for="item in shareHolding">
									<div class="more-2-list-li">
										<span>股票</span>
										<span>{{ item.stock }}</span>
									</div>
									<div class="more-2-list-li">
										<span>持仓比例</span>
										<span>{{ item.positionRate }}%</span>
									</div>
									<div class="more-2-list-process-bac">
										<div class="more-2-list-process" :style="{width:item.positionRate + '%'}"></div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</dd>
			</dl>
			<dl>
				<dt @click="collapse">交易规则<i class="iconfont">&#xe68f;</i></dt>
				<dd>
					<div class="more-3-list">
							<div class="more-3-list-title">
								<p class="more-3-list-title-left">认购费率</p>
								<p class="more-3-list-title-right">最低申购 / 认购率：<span>{{ minimumInvestment }}</span></p>
							</div>
							<div class="more-3-list-con">
								<div class="clear"></div>
								<div class="tb-left">
									<table>
										<tbody>
										<tr class="table-bg">
											<td>单笔金额</td>
										</tr>
										<tr v-for="item in subscriptionFeeKeys">
											<td>{{ item }}</td>
										</tr>
										</tbody>
									</table>
								</div>
								<div class="tb-right">
									<table>
										<tbody>
										<tr class="table-bg">
											<td>费率</td>
										</tr>
										<tr v-for="item in subscriptionFeeValues">
											<td>{{ item }}</td>
										</tr>
										</tbody>
									</table>
								</div>
								<div class="clear"></div>
							</div>
					</div>
					<div class="more-3-list">
						<div class="more-3-list-title">
							<p class="more-3-list-title-left">申购费率</p>
						</div>
						<div class="more-3-list-con">
							<div class="tb-left">
								<table>
									<tbody>
									<tr class="table-bg">
										<td>持有金额</td>
									</tr>
									<tr v-for="(item,index) in preferentialRateKeys">
										<td>{{ item }}</td>
									</tr>
									</tbody>
								</table>
							</div>
							<div class="tb-right">
								<table>
									<tbody>
									<tr class="table-bg">
										<td>费率</td>
									</tr>
									<tr v-for="(item,index) in preferentialRateValues">
										<td>{{ item }}</td>
									</tr>
									</tbody>
								</table>
							</div>
							<div class="clear"></div>
						</div>
					</div>
					<div class="more-3-list">
						<div class="more-3-list-title">
							<p class="more-3-list-title-left">赎回费率</p>
						</div>
						<div class="more-3-list-con">
							<div class="clear"></div>
							<div class="tb-left">
								<table>
									<tbody>
									<tr class="table-bg">
										<td>持有时间</td>
									</tr>
									<tr v-for="item in redemptionRateKeys">
										<td>{{ item }}</td>
									</tr>
									</tbody>
								</table>
							</div>
							<div class="tb-right">
								<table>
									<tbody>
									<tr class="table-bg">
										<td>费率</td>
									</tr>
									<tr v-for="item in redemptionRateValues">
										<td>{{ item }}</td>
									</tr>
									</tbody>
								</table>
							</div>
							<div class="clear"></div>
						</div>
					</div>
					<div class="more-3-list">
						<div class="more-3-list-title">
							<p class="more-3-list-title-left">管理费率</p>
						</div>
						<div class="more-3-list-con">
							<div class="clear"></div>
							<div class="tb-left">
								<table>
									<tbody>
									<tr class="table-bg">
										<td>名称</td>
									</tr>
									<tr v-for="item in managerRateKeys">
										<td>{{ item }}</td>
									</tr>
									</tbody>
								</table>
							</div>
							<div class="tb-right">
								<table>
									<tbody>
									<tr class="table-bg">
										<td>费率</td>
									</tr>
									<tr v-for="item in managerRateValues">
										<td>{{ item }}</td>
									</tr>
									</tbody>
								</table>
							</div>
							<div class="clear"></div>
						</div>
					</div>
				</dd>
			</dl>
			<dl>
				<dt @click="collapse">风险评级<i class="iconfont">&#xe68f;</i></dt>
				<dd>
					<div class="more-4-list">
						<div class="more-4-list-title">
							<h4 v-if="!productInfo.zhidianGrade">-- 级</h4>
							<h4 v-else>{{ productInfo.zhidianGrade | formatRisk }} 级 </h4>
							<p>资招评分：<span v-if="!productInfo.zhidianScore ">--</span><span v-else>{{ productInfo.zhidianScore }}</span> 分</p>
						</div>
						<img src="../../build/images/fund-rank.jpg">
						<div class="more-4-list-con">
							<div class="more-4-list-con-title">
								<h4>机构评级</h4>
								<p v-if="!grade.gradeDescribe">--</p>
								<p v-else>{{ grade.gradeDescribe }}</p>
							</div>
							<div class="more-4-list-text">
								<ul>
									<li class="clear-fix">
										<span>评级年限</span>
										<span>晨星</span>
										<span>银河</span>
										<span>海通</span>
									</li>
									<li class="clear-fix">
										<span>3年</span>
										<span>{{ grade.morningStar3Year | formatEmpty }}</span>
										<span>{{ grade.yinhe3Year  | formatEmpty}}</span>
										<span>{{ grade.haitong3Year  | formatEmpty}}</span>
									</li>
									<li class="clear-fix">
										<span>5年</span>
										<span>{{ grade.morningStar5Year   | formatEmpty}}</span>
										<span>{{ grade.yinhe5Year   | formatEmpty}}</span>
										<span>{{ grade.haitong5Year  | formatEmpty }}</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</dd>
			</dl>
			<dl>
				<dt @click="collapse">基金档案<i class="iconfont">&#xe68f;</i></dt>
				<dd class="fundArchives">
					<p>基金名称<span>{{ productInfo.name | formatEmpty }}</span></p>
					<p>基金代码<span>{{ productInfo.code  | formatEmpty }}</span></p>
					<p>成立日期<span>{{ proDetail.establishedTime | formatEmpty }}</span></p>
					<p>到期日期<span>{{ proDetail.expirationDate | formatEmpty }}</span></p>
					<p>集中申购<span>{{ proDetail.centralizedPurchase  | formatEmpty }}</span></p>
					<p>基金类型<span>{{ proDetail.fundType | fundType}}</span></p>
					<p>单位面值<span>{{ proDetail.unitValue  | formatEmpty}}</span></p>
					<p>最低认购/申购金额<span>{{ proDetail.subscriptionFee  | formatEmpty}}</span>
					<p>基金管理人<span>{{ proDetail.fundManager | formatEmpty}}</span></p>
					<p>基金托管人<span>{{ proDetail.fundTrustee  | formatEmpty}}</span></p>
					<p>注册登记人<span>{{ proDetail.registeredPerson  | formatEmpty}}</span></p>

				</dd>
			</dl>
		</div>
	</div>
<script src="../../build/public/vue-resource.js" charset="utf-8"></script>
<script src="../../build/public/echarts.min.js" charset="utf-8"></script>
<script src="../../build/js/publicMoney.chart.option.js" charset="utf-8"></script>
<script src="../../build/js/common.js" charset="utf-8"></script>
<script src="../../build/js/echartall.js" charset="utf-8"></script>
<script src="../../build/js/bar.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:'#container',
		data:{
			idStr:'',
			echarts:'',
			dataY:['股票','债券','其它'],
			data:[],
			wrap:[],
			productInfo:'',
			proDetail:'',
			managerInfo:[],
			workExp:[],
			tradeInfo:'',
			assetsList:'',
			shareHolding:[],
			minimumInvestment:'',
			subscriptionFee:'',
			preferentialRate:'',
			redemptionRate:'',
			managerRate:'',
			subscriptionFeeKeys:[],
			subscriptionFeeValues:[],
			preferentialRateKeys:[],
			preferentialRateValues:[],
			redemptionRateKeys:[],
			redemptionRateValues:[],
			managerRateKeys:[],
			managerRateValues:[],
			grade:''
		},
		mounted:function(){
			this.$nextTick(function(){
				vm.idStr = this.getParameter('idStr');
				vm.getInfo();
				vm.getGrade();
			})
		},
		methods:{
			chart:function(){
				var chartLine = document.getElementById('chartLine');
				initMyChart(chartLine);
				var pieData = new Array();
				var pieData1 = new Array();
				var colors=['#3edcdd','#3db4be','#4193b2','#4572a7','#204376'];
				vm.echarts = vm.data;
				for(var i=0;i<this.echarts.length;i++){
						if(this.echarts[i].value!=0){
							var ff={value:this.echarts[i].value*100,
								name:this.echarts[i].name,
								icon:'circle',
									itemStyle: {
										normal: {
											color: colors[i]
										}
									}
							};
							pieData.push(ff);
							var ff1={value:this.echarts[i].value*100,
									itemStyle: {
										normal: {
												color: '#d7d7d7'
										}
								}
						};
						pieData1.push(ff1);
					};
				}
				resetOptionLegend(vm.dataY)
				resetOptionSeries(0, pieData);
			  	resetOptionSeries(1, pieData1);
				resetOption();
			},
			initChart:function () {
				var chartLine = document.getElementById('chartLine')
				var myChart =echarts.init(chartLine);
				vm.echarts = vm.data;
				for(var i=0;i<this.echarts.length;i++){
					vm.wrap[i]=parseInt(this.echarts[i]+50);
				}
				myChart.setOption(echartBar(vm.dataY,vm.data,vm.wrap));
			},
			//折叠菜单
			collapse:function($this){
				var thisMenu = $this.target.nextSibling.nextSibling;
				var isHide = thisMenu.parentNode.classList.contains('active');
				if(isHide){
					thisMenu.parentNode.classList.remove('active');
					thisMenu.style.height = 0;
				}else {
					thisMenu.parentNode.classList.add('active');
					thisMenu.style.height = thisMenu.scrollHeight + 'px';
				}
			},
			// new
			getInfo:function (callback) {
				var url = "/product/publicFund/detail"            //公募基金详情
				get(url,{idStr:vm.idStr},function(res){
					vm.proDetail = res.data;  //数据赋值
					vm.productInfo = res.data.product;
					 //  获取重股持仓 ----环形图
					// vm.data[0].value = res.data.keyPositions.stockRate;
					// vm.data[1].value = res.data.keyPositions.bondRate;
					// vm.data[2].value = res.data.keyPositions.otherAssets;
					//  获取重股持仓 ----柱状图
					 vm.data[0] = parseFloat(res.data.keyPositions.stockRate+'%');
					 vm.data[1] = parseFloat(res.data.keyPositions.bondRate+'%');
					 vm.data[2] = parseFloat(res.data.keyPositions.otherAssets+'%');
					 vm.assetsList = res.data.keyPositions;
					 vm.shareHolding = res.data.keyPositions.shareHolding;

					vm.initChart();
					// 获取基金经理
					vm.managerInfo = res.data.fundDirector;
					var len = vm.managerInfo.length;
					for(var i=0; i<len; i++){
						vm.managerInfo[i].picture = domain + vm.managerInfo[i].picture;
					}
					vm.workExp = res.data.fundDirector.fundManagerExperienceList;
					//  获取交易规则
					vm.minimumInvestment = res.data.fundTrade.minimumInvestment;   // 最低申购费率
					vm.subscriptionFee = JSON.parse(res.data.fundTrade.subscriptionFee).subscription_rate;   // 认购费率
					vm.preferentialRate = JSON.parse(res.data.fundTrade.preferentialRate).purchase_rate;   // 申购费率
					vm.redemptionRate = JSON.parse(res.data.fundTrade.redemptionRate).redemption_rate ;  // 赎回费率
					vm.managerRate = JSON.parse(res.data.fundTrade.managerRate).management_rate;   //  管理费率
					function getKeyReady(source) {
						var key;
						for(key in source){
							if(source.hasOwnProperty(key)){
								return key;
							}
						}
					}
					function getValueReady(source) {
						var result = [];
						var key;
						var length = 0;
						for(key in source){
							if(source.hasOwnProperty(key)){
								result[length++] = source[key];
							}
						}
						return result;
					}
					function getKeys(source) {
						var result = [];
						var key;
						var length = 0;
						for(key in source){
							if(source.hasOwnProperty(key)){
								result[length++] = getKeyReady(source[key]);
							}
						}
						return result;
					};
					function getValues(source) {
						var result = [];
						var values = getValueReady(source);
						var keys = getKeys(source);
						for(var i= 0;i<keys.length;i++){
							var value = values[i][keys[i]];
							result.push(value);
						}
						return result;
					}
					// 获取 key 和 value
					vm.subscriptionFeeKeys = getKeys(vm.subscriptionFee)
					vm.subscriptionFeeValues = getValues(vm.subscriptionFee);
					vm.preferentialRateKeys = getKeys(vm.preferentialRate)
					vm.preferentialRateValues = getValues(vm.preferentialRate);
					console.log(vm.preferentialRateKeys);
					console.log(vm.preferentialRateValues);
					vm.redemptionRateKeys = getKeys(vm.redemptionRate)
					vm.redemptionRateValues = getValues(vm.redemptionRate);
					vm.managerRateKeys = getKeys(vm.managerRate)
					vm.managerRateValues = getValues(vm.managerRate);


				});
			},
			getGrade:function (callback) {
				var url = "/product/publicFund/org-grade"            //公募基金详情
				get(url,{publicFundIdStr:vm.idStr},function(res){
					vm.grade = res.data;
				});
			},
			getParameter:function(name){    //获取链接中参数
				var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if(r!=null)return  unescape(r[2]); return null;
			},
		},
		filters:{
			formatArgs:function (arg,per) {
				var num = parseFloat(arg);
				return num.toFixed(2)+per;
			}
		}
	})
</script>
</body>
</html>
